<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件案例2</title>
    <script src="../../js/vue3.js"></script>
    <style>
        #app {
            margin: 2rem auto;
            width: 40%;
        }

        .box {
            margin: 1rem;
            width: 100%;
            padding: 1rem;
            border: gray solid 1px;
        }

        p {
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <!-- 运行 -->
    <div id="app">
        <son v-for="items in jobs" :item="items" @deliver-checked="getDeliver"></son>
        <h3>您选择的职业有: {{subs}}</h3>
    </div>
    <!-- 模版 -->
    <template id="sons">
        <div class="box">
            <p class="row"><span><input type="checkbox" @click="setDeliver">{{item.job}}<span>{{item.date}}发布</span></span><span>{{item.company}}</span>
            </p>
            <p class="row"><span>{{item.price}}每月<span>{{item.address}}</span></span><span>{{item.count}}</span></p>
        </div>
    </template>
    <script>
        const temp = {
            count: 0
        }
        const v_app = Vue.createApp({
            data() {
                return {
                    jobs: [{
                        job: "Vue开发",
                        company: "哔哩哔哩",
                        date: "2024-1",
                        price: "3000-3500",
                        address: "上海-瞎编区30年经验|小学|招14亿人",
                        count: 0
                    }, {
                        job: "Java开发",
                        company: "哔哩哔哩",
                        date: "2024-1",
                        price: "3000-3500",
                        address: "上海-瞎编区30年经验|小学|招14亿人",
                        count: 0
                    },
                    {
                        job: "Html开发",
                        company: "哔哩哔哩",
                        date: "2024-1",
                        price: "3000-3500",
                        address: "上海-瞎编区30年经验|小学|招14亿人",
                        count: 0
                    },
                    {
                        job: "大数据开发",
                        company: "哔哩哔哩",
                        date: "2024-1",
                        price: "3000-3500",
                        address: "上海-瞎编区30年经验|小学|招14亿人",
                        count: 0
                    },
                    {
                        job: "云计算开发",
                        company: "哔哩哔哩",
                        date: "2024-1",
                        price: "3000-3500",
                        address: "上海-瞎编区30年经验|小学|招14亿人",
                        count: 0
                    }],
                    subs: []
                }
            },
            methods: {
                getDeliver(value) {
                    if( !this.subs.some(item => item == value)){
                        this.subs.push(value);
                        console.log("a");
                    }else{
                        this.subs = this.subs.filter(item => item != value);
                        console.log("b");
                    }
                    console.log(this.subs);
                    
                }
            },
            components: {
                son: {
                    template: "#sons",
                    data() {
                        return {
                            job: this.item.job
                        }
                    },
                    methods: {
                        setDeliver() {
                            this.$emit("deliverChecked", this.job);

                        }
                    },
                    props: {
                        item: {
                            type: Object,
                            default: function () {
                                return [

                                ];
                            }
                        },
                    }
                }
            }
        });

        v_app.mount("#app");
    </script>
</body>

</html>